
<template>
  <div class="manager-home">
    <el-col :span="24" class="header-menu">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <p class="title">鲁东大学信息与电气工程学院后台管理系统</p>
      </el-menu>
    </el-col>
    <el-row style="flex: 1">
      <el-col :span="4" class="left-menu">
        <el-menu
          :default-active="'1-' + examId"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-openeds="['1','2']"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span class="name">结果分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(examItem, examIndex) in examList"
                :key="examIndex"
                :index="'1-' + examItem.id"
                @click="selectMenu(examItem.id)"
              >
                <p class="exam-title">{{ examItem.title }}</p>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span class="name">填写记录</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(examItem, examIndex) in examList"
                :key="examIndex"
                :index="'2-' + examItem.id"
                @click="selectMenu2(examItem.id)"
              >
                <p class="exam-title">{{ examItem.title }}</p>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20" class="main">
        <p v-if="examTitle" class="exam-title">{{ examTitle }}</p>
        <el-table
          :data="tableData"
          border
          style="border: 1px solid #555"
          v-loading="loading"
        >
          <el-table-column type="expand" align="center">
            <template slot-scope="columnData">
              <p class="expend-column-title">选择人数统计</p>
              <div class="expend-column-list">
                <div class="expend-column-item">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>自我评估</span>
                    </div>
                    <div class="text-item">
                      A：<span>{{ columnData.row.zwpgPeopleNum[0] }}人</span>
                    </div>
                    <div class="text-item">
                      B：<span>{{ columnData.row.zwpgPeopleNum[1] }}人</span>
                    </div>
                    <div class="text-item">
                      C：<span>{{ columnData.row.zwpgPeopleNum[2] }}人</span>
                    </div>
                    <div class="text-item">
                      D：<span>{{ columnData.row.zwpgPeopleNum[3] }}人</span>
                    </div>
                  </el-card>
                </div>
                <div class="expend-column-item">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>重要性</span>
                    </div>
                    <div class="text-item">
                      A：<span>{{ columnData.row.zyxPeopleNum[0] }}人</span>
                    </div>
                    <div class="text-item">
                      B：<span>{{ columnData.row.zyxPeopleNum[1] }}人</span>
                    </div>
                    <div class="text-item">
                      C：<span>{{ columnData.row.zyxPeopleNum[2] }}人</span>
                    </div>
                    <div class="text-item">
                      D：<span>{{ columnData.row.zyxPeopleNum[3] }}人</span>
                    </div>
                  </el-card>
                </div>
                <div class="expend-column-item">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>学校培养</span>
                    </div>
                    <div class="text-item">
                      A：<span>{{ columnData.row.xypyPeopleNum[0] }}人</span>
                    </div>
                    <div class="text-item">
                      B：<span>{{ columnData.row.xypyPeopleNum[1] }}人</span>
                    </div>
                    <div class="text-item">
                      C：<span>{{ columnData.row.xypyPeopleNum[2] }}人</span>
                    </div>
                    <div class="text-item">
                      D：<span>{{ columnData.row.xypyPeopleNum[3] }}人</span>
                    </div>
                  </el-card>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="题目序号" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="题目名称"
            align="center"
            width="680"
          >
          </el-table-column>
          <el-table-column
            prop="zwpgAverageScore"
            label="自我评估（平均分）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="zyxAverageScore"
            label="重要性（平均分）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="xypyAverageScore"
            label="学校培养（平均分）"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { analyzeData, getQuestionList } from "../../api/home.js";

export default {
  name: "ManagerHome",
  components: {},
  props: {
    examId: [Number, String],
  },
  data() {
    return {
      examList: [],
      tableData: [],
      loading: true,
    };
  },
  watch: {
    // 监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      this.getAnalyzeData();
    },
  },
  computed: {
    examTitle() {
      let title = "";
      for (let i = 0; i < this.examList.length; i++) {
        if (this.examList[i].id == this.examId) {
          title = this.examList[i].title;
          break;
        }
      }
      return title;
    },
  },
  created() {
    this.getExamList();
    this.getAnalyzeData();
  },
  methods: {
    async getExamList() {
      const res = await getQuestionList();
      if (res.status == "200") {
        this.examList = res.data;
      }
    },
    async getAnalyzeData() {
      this.loading = true;
      const res = await analyzeData({
        examId: this.examId,
      });
      if (res.status == "200") {
        this.tableData = res.data;
        this.$nextTick(function () {
          _this.loading = false;
        });
      }
      const _this = this;
    },
    selectMenu(examId) {
      this.$router.replace(`/manager/wjdc/${examId}`);
    },
    selectMenu2(examId) {
      this.$router.replace(`/manager/record/${examId}`);
    },
  },
};
</script>

<style lang="less" scoped>
.manager-home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-menu {
    .title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: rgb(255, 208, 75);
      padding: 20px;
      box-sizing: border-box;
    }
  }
  .left-menu {
    height: 100%;
    .el-menu-vertical-demo {
      height: 100%;
    }
    .el-icon-location {
      font-size: 20px;
    }
    .name {
      font-size: 20px;
    }
    .el-menu-item {
      font-size: 18px;
    }
    .exam-title {
      max-width: 100%;
      height: 100%;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .main {
    padding: 50px;
    box-sizing: border-box;
    .exam-title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 30px;
    }
  }
  .expend-column-title {
    font-size: 18px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .expend-column-list {
    display: flex;
    justify-content: center;
  }
  .expend-column-item {
    margin-right: 20px;
    .text-item {
      padding: 5px 0;
      span {
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
}
</style>
